<template>
  <view class="container">
    <view class="search">
      <image src="../../assets/icon/图标_搜索.png" class="image"></image>
      <text>课程/场馆/教练/运动项目</text>
    </view>
    <scroll-view class="main">
      <image :src="item" mode="aspectFit" v-for="(item, index) in iconList" class="icon" :key="index" />
    </scroll-view>
    <view class="order">
      <text class="title">实时成交</text>
      <view class="decoration">
        <image src="../../assets/icon/background/渐变背景.png" class="color"></image>
        <image src="../../assets/icon/background/白背景.png" class="white"></image>
      </view>
      <scroll-view scroll-y class="container">
        <view class="item" v-for="(item, index) in transations" :key="index">
          <image :src="item.user_avatar" />
          <view class="text">
            <view class="top">
              <text class="name">{{ item.user_name }}</text>
              <text class="time">{{ formatTime(item.timestamp) }}</text>
            </view>
            <view class="bottom">
              <text class="service">购买{{ item.service }}</text>
              <text class="price">￥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="class">
      <text class="title">精选课程</text>
      <scroll-view scroll-y class="container">
        <view class="item" v-for="(item, index) in course" :key="index">
          <image :src="item.coach_avatar" />
          <view class="text">
            <view class="top">
              <text class="course">{{ item.course }}</text>
              <text class="price">￥{{ item.price }}</text>
            </view>
            <view class="bottom">
              <text class="name">{{ item.coach_name }}</text>
              <text class="intro">{{ item.intro }}</text>
              <view class="bottom">预约</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="place">
      <view class="text">
        <text class="title">推荐场馆</text>
        <text class="more">更多</text>
      </view>
      <scroll-view scroll-y class="container">
        <view class="item" v-for="(item, index) in venues" :key="index">
          <image :src="item.gym_image"/>
          <view class="text">
            <view class="top">
              <text class="title">{{ item.name }}</text>
              <text class="distance">{{ item.distance }}</text>
            </view>
            <view class="bottom">
              <text class="address">{{ item.address }}</text>
              <view class="statusAndTime">
                <text class="status">{{ item.status }}  </text>
                <text class="status">{{ item.hours }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <custom-tab-bar />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import './index.less'
import icon1 from '../../assets/icon/mainIcon/健身房.png'
import icon2 from '../../assets/icon/mainIcon/羽毛球.png'
import icon5 from '../../assets/icon/mainIcon/篮球.png'
import icon4 from '../../assets/icon/mainIcon/乒乓球.png'
import icon3 from '../../assets/icon/mainIcon/游泳.png'
import icon6 from '../../assets/icon/mainIcon/足球.png'
import icon7 from '../../assets/icon/mainIcon/网球.png'
import icon8 from '../../assets/icon/mainIcon/更多.png'
import { getCourses, getTest, getTransactions ,getVenues} from '../../api/api'
import { ScrollView } from '@tarojs/components'
import { formatTime } from '../../utils/time'
import CustomTabBar from '../../custom-tab-bar/index.vue'

const iconList = ref([icon1, icon2, icon3, icon4, icon5, icon6, icon7, icon8])
const transations = ref([])
const course = ref([])
const venues = ref([])

onMounted(async () => {
  const transationData = await getTransactions()
  transations.value = transationData.data.data
  const courseData = await getCourses()
  course.value = courseData.data.data
  const venuesData = await getVenues()
  venues.value = venuesData.data.data
  // console.log(venues.value)
})

</script>
